<template>
	<view scroll-y class="analyse-wrapper">
		<custom-header-bar backStatus="1" :title="title" bg="1"></custom-header-bar>
		<div class="data-info" :style="{ backgroundImage: 'url(' + PictureUrl + 'bg-analyse.png)' }">
			<div class="title">
				<div class="item">
				</div>
				<div class="item">
				</div>
			</div>
			<div class="time" v-if="type === 'shuimian'">
				<span class="num">{{ dataInfo.hour||'--' }}</span>
				<span class="danwei">小时</span>
				<span class="num">{{ dataInfo.minute||'--' }}</span>
				<span class="danwei">分</span>
			</div>
			<div class="time" v-if="type === 'xinlv'">
				<span class="num">{{ dataInfo.xinlv||'--' }}</span>
				<span class="danwei">次/分</span>
			</div>
			<div class="time" v-if="type === 'xueya'">
				<span class="num">{{ dataInfo.shousuoya||'--' }}/{{ dataInfo.shuzhangya||'--' }}</span>
				<span class="danwei">mmhg</span>
			</div>
			<div class="time" v-if="type === 'xueyang'">
				<span class="num">{{ dataInfo.xueyang||'--' }}</span>
				<span class="danwei">%</span>
			</div>
		</div>
		<div class="content-box">
			<div class="sleep-time" :class="{ 'xueya-box': type === 'xueya' }">
				<div style="position: relative">
					<div class="progess">
						<div v-for="(item, index) in progress.list"
							:style="{ width: (item / progress.interval) * 100 + '%' }" :key="index"
							class="progress-part"></div>
					</div>
					<div class="point inner" :style="{ left: progress.left + '%' }">
						{{ dataInfo.records||'--' }}
					</div>
					<div v-if="type === 'xueya'" class="point inner" :style="{ left: progress.left2 + '%' }">
						{{ dataInfo.records2||'--' }}
					</div>
				</div>
			</div>
			<div class="chart-wrapper">
				<div class="select-wrapper">
					<div class="item 1" :class="{ active: timeType === 'day' }" @click="handleClickTime('day')">
						天
					</div>
					<div class="item" :class="{ active: timeType === 'week' }" @click="handleClickTime('week')">
						周
					</div>
					<div class="item" :class="{ active: timeType === 'month' }" @click="handleClickTime('month')">
						月
					</div>
					<!-- <div class="item" :class="{ active: timeType === 'year' }" @click="handleClickTime('year')">
						年
					</div> -->
				</div>
				<div v-if="type === 'shuimian'">
					<div class="chart" v-if="timeType==='day'">
						<div v-if="sleepDay!==''">
							<div class="legen-wrapper">
								<div class="item">
									<div class="tag one"></div>
									<div class="name">睡眠</div>
								</div>
								<div class="item">
									<div class="tag two"></div>
									<div class="name">深睡</div>
								</div>
							</div>
							<div class="day-sleep-wrapper">
								<div class="sleep-item" v-for="item in sleepDay.data"
									:style="{left: item.style.left,width: item.style.width,backgroundColor: item.style.backgroundColor,height: item.style.height,zIndex:item.style.zIndex}">
								</div>
								<div class="time">
									<span>{{sleepDay.timeZhou.start}}</span>
									<span>{{sleepDay.timeZhou.end}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="chart" :style="{opacity:timeType==='day'?0:1}">
						<qiun-data-charts ref="shuimianchart" type="column" :opts="opts" :chartData="chartData"
							:ontouch="true" />
					</div>
				</div>
				<div v-else>
					<div class="chart">
						<qiun-data-charts type="line" :ontouch="true" :opts="opts2" :chartData="chartData2" />
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		AnalyseType
	} from "@/utils/DICT.js";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import storage from "@/utils/storage";
	import dayjs from "dayjs"
	import {
		getSleepGroupList,
		getHeartRate,
		getBloodPressure,
		getBloodOxygen,
		getNum,
	} from "@/api/analyse";
	import {
		mapGetters
	} from "vuex";
	import {
		WEEK
	} from "@/utils/DICT.js"
	import {
		UChartXLabelCount
	} from "@/utils/filter.js"
	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				perwarnShow: false,
				sleepDay: '',
				type: "",
				title: "",
				chartData: {},
				userInfo: {},
				opts: {
					title: {
						name: "—— 分钟 ——",
						fontSize: 12,
						coloe: "#00ff00",
					},
					color: ["rgba(255,213,105,1)", "rgba(108,181,255,1)", "#67B5FF"],
					padding: [0, 15, 15, 5],
					dataLabel: false,
					legend: {
						position: "top",
						margin: 30,
					},
					xAxis: {
						fontColor: "rgba(0, 0, 0, 0.35)",
						axisLineColor: "rgba(0, 0, 0, 0.06)",
						disableGrid: true,
						scrollShow: true,
					},
					yAxis: {
						data: [{
							min: 0,
							axisLineColor: "rgba(0, 0, 0, 0.06)",
							fontColor: "rgba(0, 0, 0, 0.35)",
							title: "小时",
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleOffsetY: -12,
							titleFontColor: "rgba(0, 0, 0, 0.35)",
						}, ],
						gridType: "solid",
						gridColor: "rgba(0, 0, 0, 0.06)",
						padding: 10,
						showTitle: true,
					},
					extra: {
						column: {
							type: "stack",
							width: 24,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							barBorderRadius: [24, 24, 24, 24],
						},
					},
				},
				opts2: {
					color: ["#67B5FF"],
					padding: [60, 15, 15, 5],
					dataLabel: false,
					legend: {
						show: false,
					},
					xAxis: {
						fontColor: "rgba(0, 0, 0, 0.35)",
						axisLineColor: "rgba(0, 0, 0, 0.06)",
						disableGrid: true,
						labelCount: 1,
						itemCount: 3,
						rotateLabel: true,
					},
					yAxis: {
						data: [{
							min: 0,
							axisLineColor: "rgba(0, 0, 0, 0.06)",
							fontColor: "rgba(0, 0, 0, 0.35)",
							title: "",
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleOffsetY: -12,
							titleFontColor: "rgba(0, 0, 0, 0.35)",
							max: 200,
						}, ],
						gridType: "solid",
						gridColor: "rgba(0, 0, 0, 0.06)",
						padding: 10,
						showTitle: true,
					},
					extra: {
						line: {
							type: "curve",
						},
					},
				},
				chartData2: {},
				timeType: "day",
				dataInfo: {},
				loading: true,
				shuimian: {
					min: 0,
					max: 24,
					list: [8, 4, 4, 4, 4],
					interval: 24,
				},
				xinlvAll: {
					youth: {
						min: 70,
						max: 150,
						list: [10, 20, 20, 20, 10],
						interval: 80,
					},
					adult: {
						min: 50,
						max: 110,
						list: [20, 10, 10, 10, 10],
						interval: 60,
					},
					old: {
						min: 40,
						max: 100,
						list: [20, 10, 10, 10, 10],
						interval: 60,
					},
				},
				xinlv: {},
				pressure: {},
				blood: {
					min: 70,
					max: 100,
					list: [15, 5, 4, 2, 4],
					interval: 30,
				},
				progress: {},
				progress2: {},
				deviceId: "",
				alertNum: 0,
			};
		},
		computed: {
			...mapGetters(["PictureUrl", "BlueBodyInfo"]),
		},
		onLoad(options) {
			this.type = options.type;
			this.deviceId = storage.getCurrentDevice().deviceId;
      // this.deviceId = 'DE:61:A5:E0:F2:1A'// 测试id
      console.log('this.deviceId',this.deviceId)
			// || 'F7:A4:E7:0C:70:A5'
			// || 'C0:1C:22:96:EA:9E'
			// || '23482F5E-BC8A-27C5-0171-39B0A07FC79C'
			this.title = AnalyseType[this.type];
			this.userInfo = storage.getUserInfo();
			this.init();
			this.getNum();
		},
		methods: {
			// 报警次数
			getNum() {
				let prewarnHealthType = "";
				switch (this.type) {
					case "shuimian":
						prewarnHealthType = "sleep";
						break;
					case "xinlv":
						prewarnHealthType = "heartRate";
						break;
					case "xueya":
						prewarnHealthType = "bloodPressure";
						break;
					case "xueyang":
						prewarnHealthType = "bloodOxygen";
						break;
				}
				getNum({
					prewarnHealthType
				}).then((res) => {
					if (res.data.code === 200) {
						this.alertNum = res.data.total;
					}
				});
			},
			init() {
				if (this.type === "shuimian") {
					this.getSleepGroupList();
				}
				if (this.type === "xinlv") {
					this.getHeartRate();
				}
				if (this.type === "xueya") {
					this.getBloodPressure();
				}
				if (this.type === "xueyang") {
					this.getBloodOxygen();
				}
			},
			// 血氧
			getBloodOxygen() {
				getBloodOxygen({
						type: this.timeType,
						deviceId: this.deviceId,
					})
					.then((res) => {
						console.log(res)
						res = res.data;
						const data = res.data.data;
						this.progress = this.blood;
						this.progress.left = Math.min((data.xueyang / this.progress.max) * 100, 100)
						this.dataInfo = data;
						this.dataInfo.records = data.xueyang;
						let xAxis = [];
						let series = [];
						res.data.list.forEach((item) => {
							if (this.timeType === "day") {
								xAxis.push(item.newTime.split(" ")[1] + ":00");
							} else if (this.timeType === 'week') {
								xAxis.push(WEEK[dayjs(item.newTime).day()]);
							} else if (this.timeType === 'month') {
								xAxis.push(dayjs(item.newTime).format('MM/DD'));
							} else {
								xAxis.push(dayjs(item.newTime).format('MM'));
							}
							series.push(Number(item.xueyang));
						});
						let itemCount = UChartXLabelCount(xAxis.length)
						if (itemCount === 0) {
							this.opts2.xAxis.labelCount = 0
						} else {
							this.opts2.xAxis.labelCount = 1
						}
						this.opts2.xAxis.itemCount = itemCount
						this.opts2.yAxis.data[0].max = 100
						this.opts2.yAxis.data[0].min = 40
						this.opts2.yAxis.data[0].title = '%'
						this.opts2.yAxis.splitNumber = 6
						this.chartData2 = {
							categories: xAxis,
							series: [{
								name: "血氧",
								data: series,
							}, ],
						};
						if (xAxis.length === 0) {
							this.chartData2.categories = [' ']
						}
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			// 血压
			getBloodPressure() {
				getBloodPressure({
						type: this.timeType,
						deviceId: this.deviceId,
					})
					.then((res) => {
						console.log(res)
						res = res.data;
						const data = res.data.data;
						this.xueya();
						this.progress.left = Math.min((parseInt(data.shousuoya) / this.progress.max) * 100, 100)
						this.progress.left2 = Math.min((parseInt(data.shuzhangya) / this.progress.max) * 100, 100)
						this.dataInfo = data;
						this.dataInfo.records = data.shousuoya;
						this.dataInfo.records2 = data.shuzhangya;
						let xAxis = [];
						let series = [];
						let series2 = [];

						res.data.list.forEach((item) => {
							if (this.timeType === "day") {
								xAxis.push(item.newTime.split(" ")[1] + ":00");
							} else if (this.timeType === 'week') {
								xAxis.push(WEEK[dayjs(item.newTime).day()]);
							} else if (this.timeType === 'month') {
								xAxis.push(dayjs(item.newTime).format('MM/DD'));
							} else {
								xAxis.push(dayjs(item.newTime).format('MM'));
							}
							series.push(item.shousuoya);
							series2.push(item.shuzhangya);
						});
						let itemCount = UChartXLabelCount(xAxis.length)
						if (itemCount === 0) {
							this.opts2.xAxis.labelCount = 0
						} else {
							this.opts2.xAxis.labelCount = 1
						}
						this.opts2.xAxis.itemCount = itemCount
						console.log(this.opts2.xAxis.labelCount)
						this.opts2.yAxis.data[0].max = 200
						this.opts2.yAxis.data[0].min = 50
						this.opts2.yAxis.data[0].title = 'mmHg'
						this.chartData2 = {
							categories: xAxis,
							series: [{
									name: "收缩压",
									data: series,
									color: "#67b5ff",
								},
								{
									name: "舒张压",
									data: series2,
									color: "#ffd569",
								},
							],
						};
						if (xAxis.length === 0) {
							this.chartData2.categories = [' ']
						}
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			xueya() {
				const userInfo = this.userInfo;
				if (userInfo.age < 35) {
					this.progress = {
						min: 50,
						max: 200,
						interval: 130,
						list: [33, 11, 1, 12, 73],
					};
				} else if (userInfo.age > 35 && userInfo.age < 50) {
					this.progress = {
						min: 50,
						max: 200,
						interval: 130,
						list: [42, 12, 1, 13, 62],
					};
				} else if (userInfo.age > 50 && userInfo.age < 60) {
					this.progress = {
						min: 50,
						max: 200,
						interval: 130,
						list: [54, 14, 1, 14, 47],
					};
				} else if (userInfo.age > 60) {
					this.progress = {
						min: 50,
						max: 200,
						interval: 130,
						list: [64, 15, 1, 15, 35],
					};
				} else {
					this.progress = {
						min: 50,
						max: 200,
						interval: 130,
						list: [64, 15, 1, 15, 35],
					};
				}
			},
			// 心率
			getHeartRate() {
				this.loading = true;
				getHeartRate({
						type: this.timeType,
						deviceId: this.deviceId,
					})
					.then((res) => {
						console.log(res)
						res = res.data;
						const data = res.data.data;
						const userInfo = this.userInfo;
						if (userInfo.age < 22) {
							this.xinlv = this.xinlvAll.youth;
						}
						if ((userInfo.age >= 22) & (userInfo.age <= 59)) {
							this.xinlv = this.xinlvAll.adult;
						}
						if (userInfo.age >= 60) {
							this.xinlv = this.xinlvAll.old;
						}
						this.progress = this.xinlv;
						this.progress.left = Math.min((data.xinlv / this.progress.max) * 100, 100)
						this.dataInfo = data;
						this.dataInfo.records = data.xinlv;
						let xAxis = [];
						let series = [];

						res.data.list.forEach((item) => {
							if (this.timeType === "day") {
								xAxis.push(item.newTime.split(" ")[1] + ":00");
							} else if (this.timeType === 'week') {
								xAxis.push(WEEK[dayjs(item.newTime).day()]);
							} else if (this.timeType === 'month') {
								xAxis.push(dayjs(item.newTime).format('MM/DD'));
							} else {
								xAxis.push(dayjs(item.newTime).format('MM'));
							}
							series.push(Number(item.xinlv));
						});
						let itemCount = UChartXLabelCount(xAxis.length)
						if (itemCount === 0) {
							this.opts2.xAxis.labelCount = 0
						} else {
							this.opts2.xAxis.labelCount = 1
						}
						this.opts2.xAxis.itemCount = itemCount
						this.opts2.yAxis.data[0].max = 150
						this.opts2.yAxis.data[0].min = 50
						this.opts2.yAxis.data[0].title = '次/分'
						this.chartData2 = {
							categories: xAxis,
							series: [{
								name: "心率",
								data: series,
							}, ],
						};
						if (xAxis.length === 0) {
							this.chartData2.categories = [' ']
						}
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			// 睡眠
			getSleepGroupList() {
				this.chartData = {}
				this.loading = true;
				let params = {
					type: this.timeType,
					deviceId: this.deviceId,
				}
				if (this.timeType === 'day') {
					params.dateStr = dayjs().format("YYYY-MM-DD")
				}
				getSleepGroupList(params)
					.then((res) => {
						res = res.data;
						let data = res.data.data;
						this.progress = this.shuimian;
						if (data.sleepminute !== null) {
							var hour = parseInt(Number(data.sleepminute) / 60)
							var minute = Number(data.sleepminute) % 60;
							this.progress.left = Math.min(((Number(data.sleepminute) / 60).toFixed(1) / this
								.progress
								.max) * 100, 100)
							data.hour = hour;
							data.minute = minute;
							this.dataInfo = data;
							this.dataInfo.records = `${hour}小时${minute}分`;

						}
						if (this.timeType === 'day') {
							this.sleepDay = ''
							let formatData = {
								timeZhou: {}
							}
							let list = res.data.list
							if (list.length === 0) return
							list.sort(function(a, b) {
								let aTime = dayjs(a.date, "YYYY-MM-DD HH:mm").valueOf()
								let bTime = dayjs(b.date, "YYYY-MM-DD HH:mm").valueOf()
								return aTime - bTime
							});
							let startDate = dayjs(list[0].date, "YYYY-MM-DD HH:mm")
							list.sort(function(a, b) {
								let aTime = dayjs(a.date, "YYYY-MM-DD HH:mm").add(a.time, 'minute').valueOf()
								let bTime = dayjs(b.date, "YYYY-MM-DD HH:mm").add(b.time, 'minute').valueOf()
								return aTime - bTime
							});
							let endDate = dayjs(list[list.length - 1].date, "YYYY-MM-DD HH:mm").add(list[list.length -
								1].time, 'minute')
							formatData.timeZhou = {
								start: startDate.format("HH:mm"),
								startMinute: startDate.hour() * 60 + startDate.minute(),
								end: endDate.format("HH:mm"),
								during: parseInt((endDate.valueOf() - startDate.valueOf()) / 1000 / 60)
							}
							let dataTwo = list.map((item) => {
								let itemformat = {}
								let time = dayjs(item.date, "YYYY-MM-DD HH:mm")
								let timeMinute = time.hour() * 60 + time.minute()
								let start = time.format("HH:mm")
								let end = time.add(item.time, 'minute').format("HH:mm")
								let during = item.time
								let type = item.type + ''
								let startPercent = ((timeMinute - formatData.timeZhou.startMinute) / formatData
									.timeZhou.during).toFixed(2) * 100
								let lengthPercent = (item.time / formatData.timeZhou.during).toFixed(2) * 100
								itemformat = {
									start,
									end,
									time: during,
									style: {
										left: startPercent + '%',
										width: lengthPercent + '%',
										backgroundColor: type === '1' ? '#a5e9e2' : '#82d8cf',
										height: type === '1' ? '150px' : '200px',
										zIndex: type === '1' ? 1 : 10
									}
								}
								return itemformat
							})
							console.log(formatData.timeZhou)
							console.log(dataTwo)
							formatData.data = dataTwo
							this.sleepDay = formatData
						} else {
							let xAxis = [];
							let series1 = [];
							let series2 = [];
							if (res.data.list.length === 0) {
								xAxis = [' '];
								series1 = [0];
								series2 = [0];
							} else {
								res.data.list.forEach((item) => {
									if (this.timeType === "day") {
										xAxis.push(dayjs(item.newTime).format('MM/DD'));
									} else if (this.timeType === 'week') {
										xAxis.push(WEEK[dayjs(item.newTime).day()]);
									} else if (this.timeType === 'month') {
										xAxis.push(dayjs(item.newTime).format('MM/DD'));
									} else {
										xAxis.push(dayjs(item.newTime).format('MM'));
									}
									series1.push(Number((Number(item.deepAll) / 60).toFixed(2)));
                  console.log("深睡",item.deepAll,series1)
									series2.push(Number((Number(item.shallowAll) / 60).toFixed(2)));
                  console.log("浅睡",item.shallowAll,series2)
								});
							}
							this.opts.enableScroll = true
							this.opts.xAxis.itemCount = 7
							this.opts.yAxis.data[0].max = 24
							this.opts.yAxis.data[0].min = 0
							this.opts.yAxis.data[0].title = '小时'
							this.opts.yAxis.splitNumber = 6
							this.chartData = {
								categories: xAxis,
								series: [{
									name: "深睡",
									data: series1,
								}, {
									name: "浅睡",
									data: series2,
								}],
							};
							if (xAxis.length === 0) {
								this.chartData2.categories = [' ']
							}
						}
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
					});
			},
			handleClickTime(type) {
				this.timeType = type;
				setTimeout(() => {
					this.init();
				}, 200)
			},
		},
	};
</script>

<style lang="scss">
	.analyse-wrapper {
		padding-top: 160upx;
		box-sizing: border-box;
		background-color: #f4f4f4ff;

		.content-box {
			padding: 0 24upx 24upx 24upx;
		}

		.data-info {
			height: 300upx;
			background-size: cover;

			.title {
				padding: 0 24upx;
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;

					.image {
						width: 36upx;
						height: 36upx;
						margin-right: 8upx;
					}

					.text {
						color: #ffffff;
						font-size: 32upx;
					}
				}
			}

			.time {
				margin-top: 48upx;
				display: flex;
				justify-content: center;
				align-items: baseline;
				color: #ffffff;

				.num {
					font-size: 60upx;
					margin: 0 4upx;
				}

				.danwei {
					font-size: 32upx;
					margin: 0 4upx;
				}
			}
		}

		.sleep-time {
			margin-top: -68upx;
			padding: 40upx 30upx;
			padding-top: 110upx;
			background: #ffffff;
			box-shadow: 0px 0px 14upx 1px rgba(0, 0, 0, 0.1);
			border-radius: 30upx 30upx 30upx 30upx;

			.time {
				display: flex;
				justify-content: center;

				.inner {
					width: 200upx;
					height: 78upx;
					line-height: 64upx;
					text-align: center;
					background-image: url(/static/bg-tip.png);
					background-size: cover;
				}
			}

			.progess {
				height: 40upx;
				background: #f3f5f8;
				border-radius: 10upx 10upx 10upx 10upx;
				display: flex;
				align-items: center;
				overflow: hidden;

				.progress-part {
					height: 100%;
				}

				.progress-part:first-child {
					background-color: rgba(159, 250, 250, 1);
				}

				.progress-part:nth-child(2) {
					background-color: rgba(114, 235, 235, 1);
				}

				.progress-part:nth-child(3) {
					background-color: rgba(51, 209, 209, 1);
				}

				.progress-part:nth-child(4) {
					background-color: rgba(41, 173, 173, 1);
				}

				.progress-part:nth-child(5) {
					background-color: rgba(0, 128, 128, 1);
				}
			}

			.legend {
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: baseline;

					.tag {
						width: 20upx;
						height: 20upx;
						border-radius: 20upx;

						&.rushui {
							background-color: #5ddecfff;
						}

						&.qianshui {
							background-color: #ffd569ff;
						}

						&.shenshui {
							background-color: #67b5ffff;
						}
					}

					.name {
						margin: 0 8upx;
						color: #00000099;
						font-size: 28upx;
					}

					.time {
						font-size: 40upx;
					}
				}
			}
		}

		.xueya-box {
			padding-top: 75upx;
		}

		.chart-wrapper {
			margin-top: 24upx;
			position: relative;
			padding-top: 40upx;
			background: #ffffff;
			box-shadow: 0px 0px 14upx 1px rgba(0, 0, 0, 0.1);
			border-radius: 30upx 30upx 30upx 30upx;
			height: 1000upx;
			overflow: hidden;

			.select-wrapper {
				display: flex;
				justify-content: flex-end;
				z-index: 99;

				.item {
					margin: 0 12upx;
					width: 90upx;
					height: 52upx;
					line-height: 52upx;
					text-align: center;
					background: rgba(237, 240, 244, 0.3);
					border-radius: 0px 0px 0px 0px;
					color: rgba(0, 0, 0, 0.35);

					&.active {
						color: #ff980fff;
					}
				}
			}

			.chart {
				position: relative;
				height: 900upx;
			}

			.legen-wrapper {
				position: absolute;
				top: 40upx;
				right: 40upx;
				display: flex;
				width: 320upx;

				.item {
					flex: 0 0 160upx;
					display: flex;
					align-items: center;

					.tag {
						flex: 0 0 36upx;
						height: 24upx;
						border-radius: 4upx;
						margin-right: 24upx;
					}

					.one {
						background-color: #a5e9e2;
					}

					.two {
						background-color: #82d8cf;
					}

					.name {
						color: #333333;
						font-size: 26upx;
					}
				}
			}

			.day-sleep-wrapper {
				position: absolute;
				left: 24px;
				right: 24px;
				height: 200px;
				margin-top: 100px;
				border-bottom: 2upx solid #eeeeee;

				.sleep-item {
					position: absolute;
					bottom: 0;
				}

				.time {
					position: absolute;
					width: 100%;
					display: flex;
					justify-content: space-between;
					bottom: -24px;
					color: #999999;
				}
			}
		}
	}

	.point {
		padding: 0 24upx;
		white-space: nowrap;
		height: 65upx;
		line-height: 54upx;
		text-align: center;
		background-image: url(/static/bg-tip.png);
		background-size: 100% 100%;
		position: absolute;
		top: -70upx;
		left: 0;
		transform: translateX(-52%);
		font-size: 24upx;
	}

	.perwarn-popup {
		padding: 0 40upx 40upx 40upx;
		box-sizing: border-box;

		.title {
			font-size: 32upx;
			color: #666666;
		}

		.content {
			font-size: 26upx;
			display: flex;
			margin-top: 24upx;
			color: #666666;

			.name {
				flex: 0 0 200upx;
			}
		}

	}
</style>
